<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="../../vue.js"></script>
	<title>Document</title>
</head>

<body>
	<!-- 
		关于VueComponent
			1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
			
			2.我们只需要写<school /> 或 <school></school>,Vue解析时会帮我们创建school组件的实例对象

			3.特别注意:每次调用Vue.extend, 返回的都是一个全新的VueComponent!!!

			4.关于this指向:
				(1)组件中的配置:
					data函数,methods函数,watch函数,computed的函数,他们的this均为[VueComponent实例对象]
				(2)new Vue()配置中:
					data函数,methods函数,watch函数,computed的函数,他们的this均为Vue实例对象

			5.VueComponent的实例对象,以后简称vc (也可以称作:组件实例对象)
	 -->
	<div id="root">
		
	</div>
</body>
<script>

	// 1.定义组件
	const school = {
		template: `
			<div>
				<h2>{{name}}</h2>
				<button @click="btn">1123</button>
			</div>
		`,
		data() {
			return {
				name: '张三爱李四'
			}
		},
		methods: {
			btn(){
				console.log(this) // 指的是 VueComponent实例对象  (vc)
			}
		},
	}

	// 创建vm对象
	const vm = new Vue({
		data:{
			name:'李四'
		},
		// 3.使用组件
		template:`<school></school>`,
		// 2.注册组件
		components: {
			school
		},
		methods:{
			btn(){
				console.log(this); //指的是 vm实例对象
			}
		}
	}).$mount('#root')
</script>

</html>